@primary-color: #3f45ff;
@shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px, rgba(0, 0, 0, 0.04) 0px 10px 10px;

html {
  --rv-page-home-bg-main: #f5f5f5;
  --rv-page-home-bg-light: var(--mdoc-background-color);
  --rv-page-home-component-bg: #fff;
  --rv-page-home-calendar-month-mark-color: rgba(242, 243, 245, 0.8);
}
html[data-theme='dark'] {
  --rv-page-home-bg-main: rgb(10, 25, 41);
  --rv-page-home-component-bg: #001e3c;
  --rv-page-home-calendar-month-mark-color: rgba(17, 54, 101, 0.8);
}

._home {
  color: var(--mdoc-font-color-base);
  &-wrapper {
    margin: 20px auto;
  }

  &-box {
    box-sizing: border-box;
    border: 1px solid var(--mdoc-border-color);
    border-radius: 10px;
    padding: 10px;
  }

  &-container {
    --rv-border-color: var(--mdoc-border-color);
    --rv-typography-color: var(--mdoc-font-color-base);
    --rv-cell-border-color: var(--mdoc-border-color);
    --rv-cell-text-color: var(--mdoc-font-color-base);
    --rv-cell-background-color: var(--rv-page-home-component-bg);
    --rv-collapse-item-content-background-color: var(
      --rv-page-home-component-bg
    );
    --rv-collapse-item-content-text-color: var(--mdoc-font-color-base);
    --rv-calendar-background-color: var(--rv-page-home-component-bg);

    --rv-steps-background-color: var(--rv-page-home-component-bg);
    --rv-step-text-color: var(--mdoc-font-color-base);
    --rv-step-finish-text-color: var(--mdoc-font-color-base);

    --rv-button-default-color: var(--mdoc-font-color-base);
    --rv-button-default-border-color: var(--mdoc-border-color);
    --rv-button-plain-background-color: var(--rv-page-home-component-bg);

    --rv-checkbox-label-color: var(--mdoc-font-color-base);
    --rv-calendar-month-mark-color: var(
      --rv-page-home-calendar-month-mark-color
    );

    [class*='rv-hairline']::after {
      --rv-gray-3: var(--mdoc-border-color);
    }

    display: flex;
    align-items: stretch;

    &-left,
    &-right {
      width: 50%;
      box-sizing: border-box;
      height: calc(100vh - 60px);
    }

    &-left {
      box-sizing: border-box;
      display: flex;
      padding: 50px;
      align-items: center;
      justify-content: center;

      .rv-typography--l1 {
        font-size: 72px;
        line-height: 1em;
      }
    }

    &-right {
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
    }

    &-right-content {
      width: 826px;
      margin: 0 auto;
      box-sizing: border-box;
      padding: 40px;
      flex: none;
    }

    .rv-image img {
      margin: 0;
      border-radius: 0;
    }
  }

  &-card {
    box-shadow: @shadow;
    background: linear-gradient(135deg, #3f45ff 10%, #7367f0 100%);
    .rv-button--plain {
      border-color: #fff;
      background-color: #fff;
    }
  }

  &-music-card {
    background-color: var(--rv-page-home-component-bg);
    border: 1px solid var(--mdoc-border-color);
    border-radius: 10px;
    padding: 10px;
  }

  &-button-group {
    width: 100%;
  }

  &-tabs {
    --rv-tabs-nav-background-color: @primary-color;
    --rv-tab-active-text-color: #fff;
    --rv-tab-text-color: #c2e0ff;
    --rv-tabs-bottom-bar-color: #fff;

    border-radius: 10px;
    overflow: hidden;
    box-shadow: @shadow;
  }

  &-calendar {
    --rv-calendar-selected-day-background-color: @primary-color;
    height: 380px !important;
    border-radius: 10px;
    overflow: hidden;
  }

  &-steps {
    box-sizing: border-box;
    padding: 20px;
    background-color: var(--rv-page-home-component-bg);
    border: 1px solid var(--mdoc-border-color);
    border-radius: 10px;

    &-count {
      color: @primary-color;
      width: 40px;
      height: 40px;
      border-radius: 5px;
      background-color: rgb(240, 247, 255);
    }
  }

  &-slider {
    ._home-box {
      height: 214px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &-primary-color {
    color: @primary-color;
  }
}
